<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<tn-nav-bar fixed :bottomShadow="false">发起邀约</tn-nav-bar>

		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">活动主题</view>
				</view>
				<view class="justify-content-item tn-text-right tn-color-grey">
					<tn-input v-model="zhuti" type="select" border borderColor="#c2c2c2" style="width: 250rpx;"
						placeholder="请选择主题" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center  tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">线下活动费用</view>
				</view>
				<view class="justify-content-item tn-text-right tn-color-grey">
				<tn-input v-model="paytype" type="select" border borderColor="#c2c2c2" style="width: 250rpx;"
					placeholder="请选择方式" :selectOpen="payShow" @click="payShow = true"></tn-input>
				</view>
			</view>
<view class="tn-flex tn-flex-row-between tn-flex-col-center  tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">报名{{configInfo.site_moneyname}}</view>
				</view>
				<view class="justify-content-item tn-text-right tn-color-grey">
					<tn-input v-model="money" border borderColor="#c2c2c2" type="money" placeholder="选填"
						style="width: 250rpx;"></tn-input>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center  tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">参加后打赏{{configInfo.site_moneyname}}</view>
				</view>
				<view class="justify-content-item tn-text-right tn-color-grey">
					<tn-input v-model="money_dashang" border borderColor="#c2c2c2" type="money" placeholder="选填"
						style="width: 250rpx;"></tn-input>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center  tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">活动人数</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey">
					<tn-number-box v-model="num" :min="1" :longPress="false" @change="change" backgroundColor="#d9d9d9"
						fontColor="#000000">
					</tn-number-box>
				</view>
			</view>


			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">活动时间</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey " @click="showCalendar" style="			
    height:38px;border: 1px solid rgba(0, 0, 0, 0.1);min-height: 38px;width: 250rpx;padding-top: 8px;padding-left: 5px;">
					{{times?times:'请选择时间'}}
					<tn-picker mode="time" v-model="show" :params="params" @confirm="confirm"></tn-picker>
				</view>
			</view>


			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">活动详情</view>
				</view>

			</view>
			<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
				<textarea maxlength="500" placeholder="请输入详情,如时间地点和内容" v-model="detail"
					placeholder-style="color:#AAAAAA"></textarea>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class=" tn-padding-right-xs ">相关图片</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
					<text class="tn-padding-xs">清空上传</text>
					<text class="tn-icon-delete"></text>
				</view>
			</view>




			<view class="tn-margin-left tn-padding-top-xs" style="height: 120px;">
				<tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" @on-uploaded="onUploaded" />

			</view>

		
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
		<view class=" justify-content-item">
			<view class=" tn-padding-right-xs ">活动地点</view>
		</view>
			<view class="justify-content-item tn-text-df tn-color-grey " @click="selectAddressFn()">
				<text class="tn-padding-xs">{{address?address:'请选择地点'}}</text>
				<text class="tn-icon-right"></text>
			</view>
		</view>





			<view class='tn-tabbar-height'></view>


		</view>

		<view class='tn-tabbar-height'></view>
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="fabuba()">
				<tn-button :backgroundColor="configInfo.button" padding="40rpx 0" width="60%" shadow fontBold>
					<text class="tn-icon-edit tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">确 定 发 布</text>

				</tn-button>
			</view>
		</view>




		<tn-select v-model="selectShow" mode="single" :list="selectList" @confirm="goodsTypeSelectConfirm"></tn-select>

	<tn-select v-model="payShow" mode="single" :list="paylist" @confirm="payConfirm"></tn-select>

	<tn-modal v-model="tishishow" title="提示" :maskCloseable="false" :content="tishibody" :button="tishibutton" @click="tishicilck"></tn-modal>
	
	

	</view>



</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateCreate',
		mixins: [template_page_mixin],
		data() {
			return {
				money_dashang:'',
				address: '',
				lat: '',
				lng: '',
				payShow:false,
				cate_id:0,
				money_shang:'',
				times: '',
				zhuti: '',
				paytype:'',
				money: '',
				detail: '',
				num: 1,
				selectList: [{
						label: '全部',
						value: 0
					}
				],
				paylist: [{
						label: 'AA制',
						value: 0
					},{
						label: '发起人',
						value: 1
					},{
						label: '应邀人',
						value: 2
					}
				],
				selectShow: false,
				border: false,
				actionSheetShow: false,
				show: false,
				mode: 'date',
				showLunar: true,
				activeBgColor: '#01BEFF',
				activeColor: '#FFFFFF',
				rangeBgColor: '#E6E6E655',
				rangeColor: '#01BEFF',
				btnColor: '#01BEFF',
				lunarColor: '#AAAAAA',
				startText: '开始',
				endText: '结束',
				toolTips: '请选择日期',
				changeYear: true,
				changeMonth: true,
				result: '',
				//、
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true
				},
				//
				tagList: [],
				action: '',
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: false,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
				tishibutton: [
				          {
				            text: '确定',
				            backgroundColor: 'tn-bg-indigo',
				            fontColor: '#FFFFFF'
				          }
				        ],
				tishibody:'',
				tishishow:false,

			}
		},
		onLoad(option) {
			let that = this
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			uni.$on('quan', loginBoxFlag => {
				that.quan = loginBoxFlag
				that.quan_title = loginBoxFlag.title
			});
			that.action = host + '/chat/user/up_img'

			if (option.id) {
				this.id = option.id
			}
			this.info()
		},
		methods: {
			confirm(newval) {
				this.times = newval.year + '-' + newval.month + '-' + newval.day + ' ' + newval.hour + ':' + newval.minute
				console.log(newval);
			},

			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/getclass_er',
					data: {}
				});

				if (result.data.code == 200) {
					that.selectList = result.data.data
				}else{
					this.tishishow=true
					this.tishibody=result.data.msg
				}
			},
			tishicilck(e){
				uni.navigateBack()
			},

			goodsTypeSelectConfirm(event) {
				this.zhuti = `${event[0]['label']}`
				this.cate_id=`${event[0]['value']}`
			},
			payConfirm(event) {
				console.log(event[0].label)
				this.paytype =event[0].label			
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			showCalendar() {
				this.show = true
			},
			// 日历日期有改变

			change(e) {
				console.log(3333)
				if (e < 1) {
					this.msg('最少1人')
				}

			},
			selectAddressFn() {
				let that = this;


				uni.chooseLocation({
					async success(e) {
						console.log(e);
						let str, longitude, latitude;
						if (e.errMsg == 'chooseLocation:ok' && e.address) {
							str = `${e.name}`;
							longitude = e.longitude;
							latitude = e.latitude;
						} else {
							str = '点击选择地址';
							longitude = '';
							latitude = '';
						}
						that.address = str;
						that.lng = longitude;
						that.lat = latitude;
					},
					fail(e) {
						console.log('失败', e);
						uni.showModal({
							showCancel: false, //不显示取消按钮
							title: '允许系统获取位置信息',
							success(e) {
								//确认后的回调
								uni.openSetting();
							}
						});
					}
				});
			},

			onSortList() {

			},
			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			fabuba() {
				this.$common.noMultipleClicks(this.fabu(), 1000);
			},
			// 图片
			onUploaded(list) {

				uni.showLoading({
					title: '发布中，请稍后'
				})

				if (list.length > 0) {
					let imageList = list.map(i => i.response.data.file).join(',');
					this.okpiclist = imageList
					this.send()
				} else {
					this.send()
				}
			},



			fabu() {

				if (this.zhuti =='') {
					this.msg('请选择主题')
					return
				}
				if (this.paytype == '') {
					this.msg('请选择活动费用')
					return
				}
				if (this.money == '') {
					this.msg('请输入费用，免费请写0')
					return
				}
				if (this.money_dashang == '') {
					this.msg('请输入打赏费用，免费请写0')
					return
				}
				if (this.times == '') {
					this.msg('选择活动时间')
					return
				}				
				
				if (this.detail == '') {
					this.msg('请输入活动详情')
					return
				}
			
				uni.showLoading({
					title:'提交中'
				})

				this.$refs.imageUpload.upload()
			},

			async send() {


				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/addyuehui',
					data: {						
						address: that.address,					
						lat: that.lat,					
						lng: that.lng,					
						paytype: that.paytype,					
						zhuti: that.zhuti,					
						images: that.okpiclist,
						detail: that.detail,
						price: that.money,
						price_dashang: that.money_dashang,
						num: that.num,
						cate_id: that.cate_id,												
						quan_id: that.id,						
						times: that.times
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: result.data.msg,
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.$emit('zujufabu',true)
									uni.navigateBack()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},


		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		bottom: 0;
		position: fixed;
		width: 100%;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>